<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #1F1C2C 0%, #928DAB 100%);
      color: #fff;
    }

    .wrap {
      position: relative;
      background-color: rgba(255, 255, 255, 0.2);
      width: fit-content;
      padding: 10px 20px;
      border-radius: calc(1em + 10px);
    }

    /* 细节1：使用自定义属性来控制进度 */
    @property --offset {
      syntax: "<length-percentage>";
      inherits: false;
      initial-value: 0;
    }

    .wrap.gradient-animation {
      overflow: hidden;
      /* 2. 和普通 css 变量一样使用即可： */
      background-image:
        conic-gradient(#fff 0%,
          #fff var(--offset),
          transparent var(--offset) 100%);
    }

    /* 3. 需要使用一个遮挡来挡住多余的部分，只保留描边部分 */
    /* 这里, 可先去掉如下样式 -》可看出加这个 "遮罩层" */
    /* 实则是为了将 <锥形渐变> 盖上, 实现动画是 -》描边的效果... */
    .wrap.gradient-animation::before {
      content: ' ';
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      background: #1F1C2C;
      border-radius: inherit;

      /* 3.end 通过设置 [z-index] 这一属性, 让其层叠性变低, 使得文字显现出来！！！ */
      /* 文字还设置上了对应{行内样式} -> "z-index: 1;" */
      z-index: 0;
    }

    .wrap.gradient-animation:hover {
      /* 4. 中间加的那个 "1", 没有单位, 为[执行次数]== */
      animation: gradient 5s linear 1 forwards;
    }

    @keyframes gradient {
      0% {
        --offset: 0;
      }

      100% {
        --offset: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="wrap gradient-animation">
    <!-- 需要控制层级显示 -->
    <span style="position: relative; z-index: 1;">自动进入直播间</span>
  </div>
</body>

</html>